<template>
  <div id="leaflet-map" ref="mapContainer"></div>
  <div class="heat">
    <div class="heatList"></div>
    <div class="heatListNumber">
      <div v-for="item in [250,200,150,100,50,0]">
        {{item}}
      </div>
    </div>
  </div>
</template>

<script>
import 'leaflet/dist/leaflet.css'
import {ElMessage} from "element-plus";
import L from "leaflet"
import request from "../../../utils/request.js";
import { selectByAreaCode } from "../../../api/map";
import { selectByGroupAndArea } from "../../../api/video";
import homeIcon from '../../../assets/icon-camera.png'

export default {
  name: "Leaflet",
  data() {

  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      let me = this;
      //加载区县GEO-JSON
      // request.get("/api/geo/selectByAreaCode")
      selectByAreaCode().then((resp) => {
        let geojson = resp.data.data;
        me.initMap(geojson); //初始化地图
      })
    },
    initMap(geojson) {
      //中心点
      let me=this
      let center = [geojson[0].centerLat, geojson[0].centerLon];
      //创建地图
      this.map = L.map('leaflet-map', {
        center: center, //中心点
        zoom:this.getZoom(), //初始放大系数
        crs: L.CRS.EPSG4326, //wsg84坐标系
        attributionControl: false // 移除右下角leaflet标识
      });
      L.control.zoom({
        zoomInTitle:'放大',
        zoomOutTitle:'缩小',
      }).addTo(this.map)
      //地区图层组
      let areaLayer = L.layerGroup();
      this.map.addLayer(areaLayer);
      //区县
      for (let i = 1; i < geojson.length; i++) {
        let geoObject = JSON.parse(geojson[i].geoJson); //服务端返回的是字符串JSON，转换为对象
        //创建一个geoJSON图层加入到地区图层组
        let layer = L.geoJSON(geoObject, {
          onEachFeature: function (feature, layer) {
            layer.options.color = '#A2EEFF' //边框颜色
            layer.options.weight = 1 //边框宽度
            layer.options.fillColor = '#42DFFC'; //填充色
            layer.options.fillOpacity = 0.4;//半透明
          }
        });
        //将当前区县加入区县图层组
        areaLayer.addLayer(layer);

        /**
         * 在地图上做标记，因为标记有特殊背景，因此使用DivIcon
         */
          //地图标记的标注图标
          const colorList=['marker-div-icon-blue','marker-div-icon-green','marker-div-icon-yellow']
        let icon = L.divIcon({
            className: 'marker-div-icon-title '+colorList[Math.floor(Math.random()*3)],
            html: geojson[i].name,
            iconAnchor: [60, 50] //偏移量，尽量调整到区县的中间
          });
        //标记的坐标
        //创建标记，加入地图，绑定事件
        let markerPos = [geojson[i].centerLat, geojson[i].centerLon];
        L.marker(markerPos, {
          icon: icon,
          riseOnHover: true
        }).addTo(this.map)
          .on('click', function () {//Marker事件
            console.log(geojson[i])
          })
        /**
         * png图标示例
         */
        /* let cameraIcon =  L.icon({
           iconUrl: '/src/assets/icon-camera.png',
           iconSize: [30, 30]
         });
         L.marker(markerPos, {
           icon: cameraIcon
         }).addTo(this.map)
           .on('click', function () {//Marker事件
             console.log(geojson[i])
             me.$emit('playVideo',geojson[i])
           })*/
      }
    },
    /**
     * 可以通过不断优化这里的参数，适配不同的分辨率^_^
     * @return {number}
     */
    getZoom() {
      let width = this.$refs.mapContainer.clientWidth;
      if (width < 600) {
        return 10;
      } else if (width < 2000) {
        return 9
      } else {
        return 11
      }
    }
  }
}

</script>
<style>
body .leaflet-control {
  opacity: 0.1;
  position: absolute;
  top: 50px;
}

body .marker-div-icon-title {
  width: 50px !important;
  height: 50px !important;
  text-align: center;
  line-height: 50px;
  opacity: 1;
  font-size: 12px;
  font-family: SourceHanSansCN-Medium,serif;
  color: #FFFFFF;
}
body .marker-div-icon-blue {
  background: radial-gradient(circle, #193BF0 0%, rgba(25,64,238,0.6) 84%, rgba(25,59,240,0.2) 100%);
  border-radius: 50%;
}
body .marker-div-icon-green {
  background: radial-gradient(circle, #85D046 0%, rgba(132,224,86,0.6) 84%, rgba(178,224,125,0.2) 100%);;
  border-radius: 50%;
}
body .marker-div-icon-yellow {
  background: radial-gradient(circle, #FCCC47 0%, rgba(250,209,96,0.6) 84%, rgba(240,196,74,0.2) 100%);
  border-radius: 50%;
}

</style>
<style scoped>
#leaflet-map {
  width: 100%;
  height: 100%;
}
.heat{
  width: 56px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: rgba(24,112,222,0.7);
  border: 1px solid rgba(94,170,252,0.702);
  opacity: 1;
  border-radius: 0;
  position: absolute;
  top: 550px;
  z-index: 999;
}
.heatList{
  width: 17px;
  height: 99px;
  background: linear-gradient(180deg, #F1C44A 0%, #68D64A 20%, #56C1D3 66%, #193FEE 100%);
  opacity: 1;
}
.heatListNumber{
  width: 17px;
  height: 100px;
  font-size: 10px;
  font-family: Source Han Sans CN,serif;
  font-weight: 400;
  line-height: 18px;
  color: #FFFFFF;
  opacity: 1;
}
.leaflet-container {
  background-color: transparent;
}

</style>
